<%@page import="java.util.ArrayList"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flight Search Results</title>
<link rel="stylesheet" type="text/css" href="css/site.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/script.js"></script>

<!-- Demo styling -->
<link href="css/jq.css" rel="stylesheet">

<!-- jQuery: required (tablesorter works with jQuery 1.2.3+) -->
<script src="scripts/jquery-1.7.2.min.js"></script>
<script
	src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Pick a theme, load the plugin & initialize plugin -->
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
<script src="js/jquery.metadata.js"></script>
<script>
	$(function() {
		$('table').tablesorter({
			usNumberFormat : false,
			sortReset : true,
			sortRestart : true
		});
	});	
</script>


<script type="text/javascript">
function getFlight(value) {
	$("#flightID").val(value);
}
</script>

<style type="text/css">
.hover {
	background-color: #ddd
}

.clicked {
	background-color: #999
}
</style>




</head>
<body>
	<div><%@include file="/WEB-INF/header.jsp"%></div>
	<div class="content-wrapper">
		<div id="body" style="background:;">
			<h1>Flight Search Results</h1>
			<b><c:out value="${requestScope.departure}" /></b> to: <b><c:out
					value="${requestScope.destination}" /></b> <br>
			<c:out value="${requestScope.date}" />
			<c:url value="FlightSearchResults" var="encodedURL"></c:url> 
			<form name="View and Book" method="post" action="${encodedURL}">
				<table class="tablesorter">
					<thead>
						<tr class="stripe_table">
							<th>Departure</th>
							<th>Arrival</th>
							<th>Duration</th>
							<th>Airline</th>
							<th>Price</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${requestScope.flights}" var="flight">
							<tr>
								<td><fmt:formatDate value="${flight.departure}"
										pattern="hh:mm a" /></td>
								<td><fmt:formatDate value="${flight.arrival}"
										pattern="hh:mm a" /></td>
								<td><c:out value="${flight.timeDifference}"/></td>
								<td><c:out value="${flight.operator}"/></td>
								<td>$<c:out value="${flight.cost}"/> </td>
								<td>
								<input type="submit" class="button" name="Select"
									value="Select" onclick="getFlight(${flight.id})">
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<input type="hidden" id="flightID" name="flightID" value="0" /> 
			</form>
		</div>
	</div>

</body>
</html>